<script setup>
import { ref } from 'vue'
import FreshItem from './components/FreshItem.vue'
import PopularItem from './components/PopularItem.vue'
// 调用接口
import { homeNew, homeHot } from '@/api/home'
import goDetail from '@/utils/goDetail'
import { lazyApi } from '@/utils/lazy'

// 获取新鲜好物列表
const newGoods = ref([])
const getNewGoods = async () => {
  const res = await homeNew()
  newGoods.value = res.data.result
}
const { target: newGoodsTarget } = lazyApi(getNewGoods)

// 获取人气推荐列表
const hotGoods = ref([])
const getHotGoods = async () => {
  const res = await homeHot()
  hotGoods.value = res.data.result
}
const { target: hotGoodsTarget } = lazyApi(getHotGoods)

// 回到页面顶部
const goTop = () => {
  window.scrollTo(0, 0)
}
</script>

<template>
  <div class="fresh">
    <div class="bodypanel__item">
      <div class="container" ref="newGoodsTarget">
        <div class="head">
          <span style="font-size: 30px; margin-right: 20px">新鲜好物</span>
          <span style="font-size: 16px; color: #999">新鲜出炉 品质靠谱</span>
          <span class="more">
            查看全部
            <el-icon><ArrowRight /></el-icon>
          </span>
        </div>
        <div class="body">
          <ul class="body__list">
            <li class="body__list__item" v-for="item in newGoods" :key="item.id">
              <FreshItem :name="item.name" :price="item.price" :picture="item.picture" @click="goDetail(item.id)" />
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="bodypanel__item">
      <div class="container" ref="hotGoodsTarget">
        <div class="head">
          <span style="font-size: 30px; margin-right: 20px">人气推荐</span>
          <span style="font-size: 16px; color: #999">人气爆款 不容错过</span>
          <span class="more">
            查看全部
            <el-icon><ArrowRight /></el-icon>
          </span>
        </div>
        <div class="body">
          <ul class="body__list">
            <li class="body__list__item" v-for="item in hotGoods" :key="item.id">
              <PopularItem :title="item.title" :alt="item.alt" :picture="item.picture" @click="goTop" />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fresh {
  width: 100%;
  height: 1082px;
  .bodypanel__item {
    height: 50%;
    display: flex;
    justify-content: center;
    .container {
      height: 100%;
      width: 1240px;
      .head {
        margin: 30px;
        display: flex;
        align-items: center;
        .more {
          margin-left: 800px;
          display: flex;
          align-items: center;
          cursor: pointer;
          &:hover {
            color: #27ba9b;
          }
        }
      }
      .body {
        height: 441px;
        .body__list {
          display: flex;
          list-style: none;
          padding-left: 0;
          .body__list__item {
            margin-right: 5px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
